<!-- eslint-disable @typescript-eslint/no-use-before-define -->
<!--
* @Author : wfl
* @LastEditors: fj
* @description:
* @updateInfo :
* @Date  : 2022-11-15 10:51:43
* @LastEditTime: 2023-05-30 15:55:31
-->
<script lang="ts" setup name="ManagePost">
import type { Ref } from 'vue'
import { useFields } from './fields'
import { postApi } from '@/MainApp/apis/post'
const PostEditModal = defineAsyncComponent(() => import('./PostEditModal.vue'))

const { t } = useConfig()
const { msgBoxWarnAsync, msgSuccess, msgError } = useMessage()

const { fieldList } = useFields()

// 组件返回的查询参数，包含分页和查询字段
const pageData = ref()

// 新增、修改
const editData: Ref<typeof formKey | undefined> = ref(undefined)
const visible = ref(false)
const formKey = {
  name: '',
  remark: ''
}
const postData = ref([])
const loading = ref(false)
const tadaTotal = ref(0)
// 新增
const handAddPost = () => {
  editData.value = undefined
  visible.value = true
}
// 修改
const handEditRow = (row: typeof formKey) => {
  editData.value = { ...row }
  visible.value = true
}
// 删除
const handDelete = (row: typeof formKey & { id: string; }) => {
  msgBoxWarnAsync('确认删除', `确认删除岗位[ ${row.name} ]吗?`, async () => {
    const { msg, success } = await postApi.deletePost(row.id)
    if (success) {
      queryPosts()
      msgSuccess(msg)
    }
    else {
      msgError(msg)
    }
  })
}

// 查询
const queryPosts = async () => {
  loading.value = true
  const param = {
    ...pageData.value
  }
  const { success, data, total, msg } = await postApi.getPagePosts(param)
  loading.value = false
  if (success) {
    postData.value = success ? data : []
    tadaTotal.value = total
  }
  else {
    msgError(msg)
  }
}
</script>

<template>
  <IkPageMain fixed>
    <IkPageFull
      v-model="pageData"
      header-title="岗位列表"
      :fields="fieldList"
      :table-data="postData"
      :total="tadaTotal"
      :loading="loading"
      :search="queryPosts"
    >
      <!-- 搜索slot -->
      <template #headerRight>
        <el-button
          v-role="'$ADD-POST'"
          type="primary"
          @click="handAddPost"
        >
          {{ t("action.add") }}
        </el-button>
      </template>
      <!-- 表格slot -->
      <template #operate="{ data }">
        <IkBtnContent :num="4">
          <IkSvgIcon
            v-role="'UPDATE-POST'"
            name="icon-bianji"
            show-bg
            pop
            in-table
            :start-margin="false"
            :title="t('action.modify')"
            @click="handEditRow(data.row)"
          />
          <IkSvgIcon
            v-role="'DELETE-POST'"
            name="icon-shanchu"
            show-bg
            pop
            in-table
            type="danger"
            :title="t('action.delete')"
            @click="handDelete(data.row)"
          />
        </IkBtnContent>
      </template>
    </IkPageFull>
    <PostEditModal
      v-model:visible="visible"
      :form-key="formKey"
      :edit-data="editData"
      @dataChange="queryPosts"
    />
  </IkPageMain>
</template>
